<template>
  <div class="knowledge-page">
    <el-scrollbar class="menu">
      <Menu :index="1" />
    </el-scrollbar>
    <div class="aside">
      <img src="../../assets/knowledge/menu.png" width="100%" alt="" />
    </div>
    <el-scrollbar class="colR">
      <div class="conText">
        <el-row>
          <el-input
            v-model="query.keywords"
            size="large"
            :style="{ width: '896px' }"
            placeholder="请输入"
          ></el-input>
          <el-button
            type="primary"
            size="large"
            :icon="Search"
            @click="handleSearch"
            >查一查</el-button
          >
        </el-row>
        <el-button
          type="primary"
          :icon="Refresh"
          :style="{ marginTop: '12px' }"
          @click="handleTry"
          >试一试</el-button
        >
        <template v-if="isShow">
          <div :style="{ padding: '20px 0' }" v-if="loading">
            <el-skeleton animated />
          </div>
          <div class="text" v-if="!loading">
            <div class="li">
              坚果行业是我国休闲食品市场的重要组成部分，近年来发展迅速。根据搜索结果，我为您整理了以下关于坚果行业的信息：
            </div>
            <div class="li">
              1.
              坚果行业发展历程：坚果行业在2000年后步入高速发展阶段，逐渐形成了500余家生产企业及30余个连锁品牌形象。2010-2015年，随着互联网的不断渗透，坚果市场迅速扩张。2015年至今，线上和线下模式相结合，坚果行业逐步形成全渠道融合的销售模式。
            </div>
            <div class="li">
              2.
              市场规模：坚果行业是休闲食品第二大千亿赛道，成长空间广阔。根据弗若斯特沙利文，种子及坚果炒货零售额从2016年的1042亿元增长至2021年的1512亿元，CAGR达7.7%。预计2023年坚果炒货行业规模以上企业销售规模将超过2000亿元。
            </div>
            <div class="li">
              3.
              行业趋势：随着消费者对健康食品需求度的不断提升，坚果行业将持续保持强劲的发展势头。预计2023年坚果零售均价将从2016年的48.13元/千克增长到53.34元/千克。未来，坚果行业将呈现量价齐升趋势，需求持续扩容叠加供给侧发力，预计国内坚果行业将在疫后迎来加速发展期。
            </div>
            <div class="li">
              综上所述，坚果行业在我国市场具有广阔的发展空间，竞争激烈，主要品牌为洽洽食品、三只松鼠和良品铺子。未来，随着消费者对健康食品需求的不断提升，坚果行业将继续保持快速发展态势。
            </div>

            <div class="files">
              <div class="name">参考资料</div>
              <router-link to="" class="link"
                >1.国泰君安:食品消费触底反弹，细分类目增幅亮限.pdf</router-link
              >
              <router-link to="" class="link"
                >2.[东海证券1公司深度报告:
                迎加速期，口味型坚果龙头崛起券商研报</router-link
              >
              <router-link to="" class="link"
                >3.[华鑫证券]公司深度报告:
                口味型坚果龙头启航，产品+渠道加速成长</router-link
              >
            </div>
          </div>
          <div class="bar" v-if="!loading">
            <div class="title">相关研报</div>
            <img src="../../assets/knowledge/bg-3.png" width="180" alt="" />
          </div>
          <div class="rows" v-if="!loading">
            <img src="../../assets/knowledge/bg-4.png" class="img" alt="" />
            <img src="../../assets/knowledge/bg-5.png" class="img" alt="" />
            <img src="../../assets/knowledge/bg-6.png" class="img" alt="" />
            <img src="../../assets/knowledge/bg-7.png" class="img" alt="" />
            <img src="../../assets/knowledge/bg-8.png" class="img" alt="" />
            <img src="../../assets/knowledge/bg-9.png" class="img" alt="" />
          </div>
        </template>
      </div>
    </el-scrollbar>
  </div>
</template>
<script setup>
import { ref, reactive } from "vue";
import { Refresh, Search } from "@element-plus/icons-vue";
import Menu from "./menu.vue";

const loading = ref(false);
const isShow = ref(false);

const query = reactive({
  keywords: "",
});

function handleTry() {
  query.keywords = "坚果行业的市场规模和发展趋势";
}

function handleSearch() {
  isShow.value = true;
  loading.value = true;
  setTimeout(() => {
    loading.value = false;
  }, 3000);
}
</script>
<style lang="scss" scoped>
.knowledge-page {
  clear: both;
  overflow: hidden;
  height: 100%;
  line-height: 1;
  display: flex;
  font-size: 14px;

  .menu {
    background-color: #fff;
  }
  .aside {
    width: 300px;
    background-color: #fff;
    margin: 20px;
    border-radius: 0 0 12px 12px;
    overflow: hidden;
  }
  .colR {
    flex: 1;
    width: 1%;
    height: calc(100vh - 100px);
    background-color: #fff;
    margin: 20px 20px 20px 0;
    border-radius: 12px;
    padding-top: 32px;
    .conText {
      width: 1000px;
      margin: 0 auto;
      overflow: hidden;
      padding-bottom: 32px;
      .img1 {
        margin-top: 20px;
      }
      .img2 {
        margin-top: 20px;
      }
      .bar {
        padding: 24px 0 20px;
        display: flex;
        align-items: center;
        .title {
          color: #2171fe;
          font-size: 24px;
          font-weight: bold;
          margin-right: 30px;
        }
      }
      .rows {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        .img {
          width: calc(100% / 3 - 13px);
          margin-bottom: 20px;
        }
      }
      .text {
        background-color: #fff;
        border-radius: 12px;
        border: solid 1px #ccc;
        margin-top: 20px;
        padding: 8px 20px 10px;
        .li {
          line-height: 1.6;
          padding: 6px 0;
        }
        .files {
          margin-top: 10px;
          clear: both;
          overflow: hidden;
          .name {
            color: #2171fe;
            padding-bottom: 8px;
          }
          .link {
            color: #2171fe;
            line-height: 1.6;
            display: flex;
            text-decoration: underline;
          }
        }
      }
    }
  }
}
</style>
